<template>
    <div class="side">
        <a-space class="wrapper">
            <div class="button1">
                <a-button 
                class="custom-buttom" 
                size="large"
                @click="handleaddchat">
                <PlusCircleTwoTone />
                    新建聊天
                </a-button>    
            </div>
            <div id="scrollable" style="height:calc(100vh - 210px); width:270px;overflow-y: scroll; padding: 0;">
                <history />
            </div>
            <div class="button2">
                <a-button
                class="cleanlist"
                size="large"
                @click="handleclean"
                ><DeleteTwoTone />清空历史记录</a-button>                
            </div>

        </a-space>
    </div>
</template>

<script setup lang="ts">
import { DeleteTwoTone, PlusCircleTwoTone } from '@ant-design/icons-vue';
import history from './history.vue';
import { chatChatStore } from '~@/stores/chatmessage';
import { useUserStore } from '~@/stores/user'
import { deleteAllTitle, addConversion } from '~@/api/dashboard/chat'
import queryChatHistory from './history.vue'
import { message as Message } from 'ant-design-vue'

const chatStore = chatChatStore()
const userStore = useUserStore()

const scrollableDiv = document.getElementById('scrollable')

async function handleaddchat() {
    if (!userStore.userInfo) {
        Message.error('未查到用户，请重新登录！');
        return
    }
    let { data, message} = await addConversion({
        id:Number(userStore.userInfo.id)
    })
    // console.log(data.chatId)
    Message.success(message)
    chatStore.updateChatId(data.chatId)
    chatStore.clearChatMessages()
}

async function handleclean() {
    if (!userStore.userInfo) {
        Message.error('未查到用户，请重新登录！');
        return
    }
    // 清空聊天记录 userStore.userInfo.id
    let { message } = await deleteAllTitle({
        id:Number(userStore.userInfo.id)
    })
    Message.success(message);
    chatStore.queryChat()
}

onMounted(() => {
    const scrollableDiv = document.getElementById('scrollable');
    if(!scrollableDiv) {
        return       
    }
    scrollableDiv.addEventListener('scroll', () => {
        // console.log(scrollableDiv.scrollHeight) //970
        // console.log(Math.ceil(scrollableDiv.scrollTop)) //388.6666
        // console.log(scrollableDiv.clientHeight) //581
        // 计算时向上取整
        const isAtBottom = scrollableDiv.scrollHeight - Math.ceil(scrollableDiv.scrollTop) === scrollableDiv.clientHeight;
        if (isAtBottom) {
            // console.log('最底端');
            chatStore.queryChat();
        }
    });
});

</script>

<style lang="less" scoped>
.side {
    background-color: #EFECF6;
    // align-content: center;
    width: 300px;
    height: calc(100vh - 48px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.wrapper {
    display: flex;
    flex-direction: column;
    width: 300px;
    height: 100vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    // 新建聊天按钮
    .button1 {
        // margin-top: 5px;
        height: 80px;
        display: flex;
        // align-items: left;
        // background-color: #fff;
        .custom-buttom {
            border-radius: 8px;
            margin-left: 0;
            margin-top:20px;
            margin-bottom: 20px;
            width: 150px;
            height: 50px;
            font-weight: 400;
            font-size: medium;
            background-color: #fff;
            color: #615ced;
            border-color: #4955F5;
            cursor: pointer;
        }        
    }
    .button2 {
        display: flex;
        align-items: center;
        padding: 0;
        margin: 0;
        align-items: center;
        height: 60px;
        .cleanlist {
            margin-left: 0;
            display: flex;
            align-items: center;
            width: 150px;
            border-radius: 8px;
            background-color: #fff;
            color: #615ced;
            border-color: #4955F5;
        }        
    }
    .cleanlist:hover{
        color: #fff;
        border-color: #4955F5;
        background: linear-gradient(to left, #7F7FD5, #86A8E7, #91EAE4 );  
    }
    .custom-buttom:hover {   
        color: #fff;
        border-color: #4955F5;
        background: linear-gradient(to left, #7F7FD5, #86A8E7, #91EAE4 );  
    }
}

div::-webkit-scrollbar {
    width: 3px;
}
/* 滑块 */
    div::-webkit-scrollbar-thumb {
    border-radius: 25px;
    background-color: #C1C1C1
}
/* 轨道 */
    div::-webkit-scrollbar-track {
    background-color: #EFECF6;
}
</style>
  